<!--
 * @FileDescription: 请填写该文件描述信息
 * @Author: Versient
 * @Date: 2024-11-10 14:27:04
 * @LastEditors: Versient
 * @LastEditTime: 2025-01-08 21:13:43
-->
<template>
  <view class="play-tour">
    <!-- 规则说明 -->
    <view class="rule">
      <text class="rule-title">打赏规则</text>
      <text class="rule-cont">
        巧人您好，为监督与促进品牌发展，现发放打赏福利。
      </text>
      <text class="rule-cont">可打赏金额为消费金额的10%，一单一券。</text>
      <text class="rule-cont">
        打赏后下单可使用打赏金额双倍无限期无规则抵用券。
      </text>
    </view>

    <!-- 打赏商品列表 -->
    <view v-if="this.data.length > 0">
      <view class="tour-list">
        <view class="check-item">已选订单 ({{ selectList.length }}单)</view>
        <view
          class="scoll-item"
          :style="{
            height: show ? '46vh' : '43vh',
            overflowY: show ? 'auto' : 'hidden',
          }"
        >
          <view
            :key="item.id"
            class="tour-item"
            v-for="(item, idx) in data"
            @click="checkItem(item)"
            :style="{
              borderBottom: idx == data.length - 1 ? '' : '2rpx solid #dcdcdd',
            }"
          >
            <view
              class="dgc bsf f-c"
              :style="{
                background: item.checked ? '' : '#fff',
                border: '3rpx solid #CACBCD',
              }"
            >
              <text
                class="iconfont icongou f22"
                :style="{
                  color: item.checked ? '#FEFEFE' : '',
                  display: item.checked ? 'black' : 'none',
                }"
              ></text>
            </view>
            <image class="tour-img" :src="item.icon" />
            <view class="tour-text">
              <text class="tour-title">{{ item.name }}</text>
              <text class="money">￥{{ item.money }}</text>
              <text class="tour-date color1">{{
                timeToDate(item.createdAt)
              }}</text>
            </view>
            <view class="tour-ratio color1">
              <text>打赏</text>
              <text class="tour-money">(10%)</text>
            </view>
            <view class="tour-title">￥{{ item.money }}</view>
          </view>
        </view>
      </view>
      <view
        v-if="!show"
        style="
          display: flex;
          justify-content: center;
          position: reactive;
          top: -10rpx;
        "
        @click="
          () => {
            show = !show;
          }
        "
      >
        <image
          style="width: 45rpx; height: 40rpx"
          src="../../static/show.png"
        />
      </view>
    </view>
    <view
      class="null-list"
      v-else
      @click.stop="go({ t: 3, url: `/yb_wm/index/goods` })"
      >请下单后进行打赏
    </view>

    <!-- 打赏操作 -->
    <view class="footer-tour" v-if="this.data.length > 0">
      <view class="footer-left">
        <text class="footer-title">打赏 ￥{{ tourMoney }}</text>
        <text class="footer-text"> (双倍返还打赏金额)</text>
      </view>
      <view class="footer-right" @click="showCarHandle">确认打赏</view>
    </view>
    <mg-popup v-model="showCar">
      <view class="tour-model">
        <view>
          <view>
            <text class="title">打赏</text>
            <text class="money">￥{{ tourMoney }}</text>
          </view>
          <view class="detail">双倍返还打赏金额作为抵用券</view>
        </view>

        <view class="handle-btn">
          <view
            class="cancel"
            @click="
              () => {
                showCar = false;
              }
            "
            >放弃打赏</view
          >
          <view class="ensure" @click="comfit">确定打赏</view>
        </view>
      </view>
    </mg-popup>

    <footc></footc>
    <tab-bar></tab-bar>
    <load v-if="showloading"></load>
  </view>
</template>

<script>
import load from "@/components/common/load.vue";
import footc from "@/components/common/footc.vue";
import { mapActions, mapState } from "vuex";
import { utilMixins } from "@/common/util-mixins.js";
import jzz from "@/components/common/jzz.vue";

import mgPopup from "@/components/common/popup.vue";

export default {
  name: "mine",
  components: { load, footc, jzz, mgPopup },
  mixins: [utilMixins],

  data() {
    return {
      showloading: true,
      opcity: 0,
      data: [],
      show: false,
      showCar: false,
      selectList: [],
    };
  },

  onLoad(options) {
    this.getSystem();
    this.getLoginInfo({ inviteId: options.userId });
    this.getLayout({ page: "personalcenter", id: "2" }).then(() => {
      this.showloading = false;
      // #ifdef H5
      this.util.setNT(this.layout.pageSetting[0].styles.navTitle || "个人中心");
      // #endif
    });
    this.getConfig({
      key: "vipset",
      api: "config",
      params: { ident: "vipSet" },
    });
    this.getLayout();
  },
  onShow() {
    if (this.uId) {
      this.refreshUser({ nomask: 1, get: 1, now: 1 });
    }
    this.getList();
  },
  computed: {
    ...mapState({
      layout: (state) => state.layout.personalcenter.body || {},
    }),

    tourMoney() {
      let money = 0;
      this.selectList.forEach((item) => {
        money += parseFloat(item.money);
      });
      return money;
    },
  },

  methods: {
    ...mapActions(["getConfig"]),

    // 处理状态
    checkItem(value) {
      this.data.forEach((item) => {
        if (item.id == value.id) {
          item.checked = !item.checked;
        }
      });
      if (value.checked) {
        this.selectList.push(value);
      } else {
        this.selectList.forEach((item, index) => {
          if (item.id == value.id) {
            this.selectList.splice(index, 1);
          }
        });
      }
    },

    //
    showCarHandle() {
      if (this.selectList.length == 0) {
        this.util.message("请选择打赏订单", 3);
        return;
      }
      this.showCar = true;
    },

    // 确定打赏
    comfit() {
      this.go({
        t: 2,
        url:
          "/yb_wm/other/mg-pay?payObj=" +
          encodeURIComponent(
            JSON.stringify({
              // orderId: orderRes.data,
              orderType: 1,
              info: {
                money: this.tourMoney,
                storeName: '打赏支付',
                type: "打赏支付",
                go: {
                  t: 6,
                  url: "/yb_wm/index/myShangQuan",
                },
              },
            })
          ),
      });
      // this.getList();
    },

    // 加载数据源
    async getList() {
      // let result = await this.getOrderList({});
      let result = [
        {
          addNum: "0",
          addType: "2",
          attribute: "浓(巧深度爱好者),热（300ml）,",
          boxMoney: "0.00",
          createdAt: "1731223632",
          data: "",
          goodsId: "31",
          groupId: "0",
          icon: "https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/01/202411011626461395.jpg",
          id: "9",
          isActivity: "0",
          isChange: "2",
          item: "1",
          material: "",
          money: "0.01",
          name: "奶茶",
          num: "1",
          orderId: "8",
          reason: null,
          storeId: "2",
          uniacid: "1",
        },
        {
          addNum: "0",
          addType: "2",
          attribute: "浓(巧深度爱好者),热（300ml）,",
          boxMoney: "0.00",
          createdAt: "1731223632",
          data: "",
          goodsId: "31",
          groupId: "0",
          icon: "https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/01/202411011626461395.jpg",
          id: "10",
          isActivity: "0",
          isChange: "2",
          item: "1",
          material: "",
          money: "0.01",
          name: "奶茶",
          num: "1",
          orderId: "8",
          reason: null,
          storeId: "2",
          uniacid: "1",
        },
        {
          addNum: "0",
          addType: "2",
          attribute: "浓(巧深度爱好者),热（300ml）,",
          boxMoney: "0.00",
          createdAt: "1731223632",
          data: "",
          goodsId: "31",
          groupId: "0",
          icon: "https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/01/202411011626461395.jpg",
          id: "11",
          isActivity: "0",
          isChange: "2",
          item: "1",
          material: "",
          money: "0.01",
          name: "奶茶",
          num: "1",
          orderId: "8",
          reason: null,
          storeId: "2",
          uniacid: "1",
        },
        {
          addNum: "0",
          addType: "2",
          attribute: "浓(巧深度爱好者),热（300ml）,",
          boxMoney: "0.00",
          createdAt: "1731223632",
          data: "",
          goodsId: "31",
          groupId: "0",
          icon: "https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/01/202411011626461395.jpg",
          id: "12",
          isActivity: "0",
          isChange: "2",
          item: "1",
          material: "",
          money: "0.01",
          name: "奶茶",
          num: "1",
          orderId: "8",
          reason: null,
          storeId: "2",
          uniacid: "1",
        },
        {
          addNum: "0",
          addType: "2",
          attribute: "浓(巧深度爱好者),热（300ml）,",
          boxMoney: "0.00",
          createdAt: "1731223632",
          data: "",
          goodsId: "31",
          groupId: "0",
          icon: "https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/01/202411011626461395.jpg",
          id: "13",
          isActivity: "0",
          isChange: "2",
          item: "1",
          material: "",
          money: "0.01",
          name: "奶茶",
          num: "1",
          orderId: "8",
          reason: null,
          storeId: "2",
          uniacid: "1",
        },
      ];

      result.forEach((item) => {
        item.checked = false;
      });

      console.log("result:::⭕ ", result);
      this.data = result;
    },
  },

  onPageScroll(e) {
    if (this.opcity >= 1 && e.scrollTop / 64 >= 1) {
      return;
    }
    let o = e.scrollTop / 64;
    this.opcity = o;
  },
};
</script>
<style scoped lang="scss">
.play-tour {
  padding: 160rpx 40rpx 40rpx;
  background-color: #f7f7f7;

  .rule {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    padding: 30rpx 30rpx 40rpx;
    border-radius: 5rpx;
    margin-bottom: 40rpx;

    .rule-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .rule-cont {
      font-size: 26rpx;
      color: #666;
      line-height: 40rpx;
    }
  }

  .footer-tour {
    margin: 0 40rpx;
    position: fixed;
    bottom: 180rpx;
    left: 0;
    width: 90%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 10rpx 0 40rpx;
    border-radius: 60rpx;
  }

  .footer-title {
    font-weight: 700;
    letter-spacing: 3rpx;
    font-size: 32rpx;
  }

  .footer-text {
    font-size: 26rpx;
    color: #666;
    margin-top: 10rpx;
  }

  .footer-right {
    width: 200rpx;
    height: 80rpx;
    background-color: #303030;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    line-height: 80rpx;
    font-weight: 700;
    letter-spacing: 3rpx;
    border-radius: 40rpx;
  }
}

.tour-list {
  background-color: #fff;
  border-radius: 5rpx;
  padding: 30rpx 30rpx;
  margin-bottom: 15rpx;

  .check-item {
    font-size: 28rpx;
    color: #333;
    font-weight: 700;
    margin-bottom: 30rpx;
  }

  .tour-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;

    .tour-img {
      width: 100rpx;
      height: 120rpx;
    }

    .tour-text,
    .tour-ratio {
      display: flex;
      flex-direction: column;
    }

    .tour-ratio {
      align-items: center;
    }

    .tour-title {
      font-size: 25rpx;
      font-weight: 700;
      color: #333;
      letter-spacing: 3rpx;
    }

    .money {
      font-size: 25rpx;
      font-weight: 700;
      color: #333;
    }

    .color1 {
      font-size: 23rpx !important;
      color: #bfc0c2 !important;
    }
  }
}

.null-list {
  margin: 100rpx auto 0;
  width: 50vw;
  height: 80rpx;
  line-height: 75rpx;
  text-align: center;
  letter-spacing: 3rpx;
  font-size: 28rpx;
  color: #616161;
  border: 1.5rpx solid #808080;
  border-radius: 60rpx;
}

.tour-model {
  text-align: center;
  padding: 80rpx 0;
  height: 40vh;
  border-radius: 60rpx 60rpx 0 0;
  background-color: #fff;

  .title {
    margin-right: 50rpx;
    font-size: 50rpx;
    color: #000;
    font-weight: bold;
    letter-spacing: 5rpx;
  }

  .money {
    font-size: 40rpx;
    color: #000;
    font-weight: 700;
  }

  .detail {
    margin-top: 15rpx;
    font-size: 24rpx;
    color: #000;
    font-weight: 400;
  }
}

.handle-btn {
  margin-top: 100rpx;
  display: flex;
  justify-content: center;

  .cancel {
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 60rpx;
    font-size: 30rpx;
    letter-spacing: 3rpx;
    font-weight: 600;
    color: #fff;
    background-color: #c6c6c6;
  }

  .ensure {
    margin-left: 60rpx;
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 60rpx;
    font-size: 30rpx;
    letter-spacing: 3rpx;
    font-weight: 600;
    color: #fff;
    background-color: #303030;
  }
}

.dgc {
  width: 40rpx;
  height: 40rpx;
  background: #040403;
}
</style>